<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="1" height="1"></canvas>
<script src="../../resources/js-test.js"></script>
<script>
jsTestIsAsync = true;
var worker = new Worker('./resources/worker-onmessage-noop.js');

description("Tests how putImageData and createImageBitmap would react when the source data is detached");

var imageWidth = 1;
var imageHeight = 1;
var arrBuffer = new Uint8ClampedArray(new ArrayBuffer(4));
arrBuffer[0] = 255;
arrBuffer[1] = 0;
arrBuffer[2] = 0;
arrBuffer[3] = 255;
var image = new ImageData(arrBuffer, imageWidth, imageHeight);
var context = document.getElementById("canvas").getContext("2d");

var len = image.data.byteLength;
shouldBe("len", "4");
shouldBe("image.data[0]", "255");
shouldBe("image.data[1]", "0");
shouldBe("image.data[2]", "0");
shouldBe("image.data[3]", "255");

context.putImageData(image, 0, 0);
var newImage = context.getImageData(0, 0, 1, 1);
shouldBe("newImage.data[0]", "255");
shouldBe("newImage.data[1]", "0");
shouldBe("newImage.data[2]", "0");
shouldBe("newImage.data[3]", "255");

// transfer the array buffer to the worker so that the source data is now detached
worker.postMessage({data: image.data.buffer}, [image.data.buffer]);

len = image.data.byteLength;
shouldBe("len", "0");
shouldBe("image.data[0]", "undefined");
shouldBe("image.data[1]", "undefined");
shouldBe("image.data[2]", "undefined");
shouldBe("image.data[3]", "undefined");

shouldThrow("context.putImageData(image, 0, 0)");

createImageBitmap(image).then(function() {
    testFailed('Promise resolved unexpectedly');
    finishJSTest();
}, function(err) {
    testPassed('Promise rejected as expected: ' + err);
    finishJSTest();
});

</script>
</body>
</html>
